<template>
  <div class="cgs" :style="{backgroundImage: `url(${sysInfo.bgImg})`}">
    <div class="cgs-container flex-col" style="height: 500px">
      <div class="cgs-container-title flex-col">
        <span class="info1">{{title}}</span>
        <span class="info2">WELCOME&nbsp;TO&nbsp;{{title}}</span>
      </div>
      <div class="cgs-input-div">
        <input v-model="userName"
               @blur="handleInputBlur($event, 'userName')"
               placeholder="请输入账号"
               @keyup.enter="handleLogin"
        >
        <span class="iconfont cgsIcon-user" />
        <label><div v-if="userLabel" class="label-span">!</div>{{userLabel}}</label>
      </div>
      <div class="cgs-input-div">
        <span class="iconfont cgsIcon-lock" />
        <input v-model="password"
               type="password"
               @blur="handleInputBlur($event, 'password')"
               placeholder="请输入密码"
               @keyup.enter="handleLogin"
        >
        <label><div v-if="passwordLabel" class="label-span">!</div>{{passwordLabel}}</label>
      </div>
      <div class="cgs-input-div">
        <!-- <span class="user" /> -->
        <!-- <div class="verifyInput">

          <input v-model="verifyText" placeholder="请输入验证码" style="width: 250px; padding-left: 20px;"/>
          <div style="display:inline-block">

            <div id="verifyContainer" style="width: 100px;height: 40px;"></div>
          </div>
        </div> -->
        <Vcode :show="showVerify" @success="successVerify" @close="closeVerify" />
        <label><div v-if="verifyLabel" class="label-span">!</div>{{verifyLabel}}</label>
      </div>
      <div style="margin-top: 50px">
        <el-button type="primary" :loading="buttonLoading" @click="handleLogin">{{buttonLoadText}}</el-button>
      </div>
      <div class="cgs-container-bottom">
        <span v-if="releaseType.toLowerCase() === 'public'" @click="$router.push({path: '/register'})">注册新账号</span>
        <span @click="$router.push({path: '/findPassword'})">忘记密码？</span>
      </div>
      <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
    </div>
    <!-- <div class="cgs-bottom flex-row" v-if="!sysInfo.bgImg">
      <div class="cgs-bottom-triangle">
        <div class="cgs-bottom-down"></div>
        <div class="cgs-bottom-up"></div>
      </div>
    </div> -->
  </div>
</template>
<script>
  import {Message} from 'element-ui';
  import {loginByUsername, getUserInfo} from "@/api/user";
  import {getTenantInfo} from '@/api/authority'
  import {setToken, setHeadPic, setUserInfo, setUserAuthority, setTenantInfo, setEntry} from "../../util/auth";
  // import  "@/assets/js/gVerify.js"
  // import Vcode from "vue-puzzle-vcode";

  export default {
    name: "login",
    components: {
      // Vcode
    },
    data() {
      return {
        userName: "",
        password: "",
        userLabel: "",
        passwordLabel: "",
        buttonLoading: false,
        buttonLoadText: "登录",
        showVerify: false
      };
    },
    computed: {
      releaseType () {
        return this.$store.getters.releaseType
      },
      sysInfo () {
        return this.$store.getters.sysInfo
      },
      title() {
        return this.$store.state.sysInfo.name.toUpperCase()
      },
      registration(){
        return this.$store.state.sysInfo.domainRegistrationInfo
      }
    },
    props: [],
    methods: {
      successVerify(){
        this.showVerify = false
        this.handleLogin()
      },
      closeVerify(){
        this.showVerify = false
      },
      handleInputBlur (e, type, action) {
        let value = e;
        if (!action) {
          value = e.target.value
        }
        value = value.trim();
        let flag = true;
        switch (type) {
          case "userName":
            if (value === "" || !value) {
              this.userLabel = "请输入账号！"
              flag = false;
            } else {
              this.userLabel = ""
            }
            break;
          case "password":
            if (value === "" || !value) {
              this.passwordLabel = "请输入密码！"
              flag = false;
            } else {
              this.passwordLabel = ""
            }
            break;
        }
        return flag;
      },
      handleLogin () {
        let flagUser = this.handleInputBlur(this.userName, 'userName', true);
        let flagPassword = this.handleInputBlur(this.password, 'password', true);
        if (flagUser && flagPassword) {
          this.buttonLoading = true;
          this.buttonLoadText = "登录中...";
          loginByUsername({
            Username: this.userName,
            Password: this.password
          }).then(res=>{
            // console.log(res.data)
            const data = res.data;
            if (data.Code !== 200) {
              Message({
                message: data.Msg,
                type: 'error'
              })
              this.buttonLoading = false;
              this.buttonLoadText = "登录";
            }else{
              // console.log(data);
              setToken(data.Data["Token"]);
              // setRefreshToken(res.data['refresh_token']);
              setHeadPic(data.Data['avatar']);
              getUserInfo().then(res => {
                if(res.data && res.data.success){
                  setUserInfo(data.Data);
                  setUserAuthority(res.data.data);
                  getTenantInfo({
                    tenantId: res.data.data.tenantId
                  }).then((tenantInfo) => {
                    if(tenantInfo.data && tenantInfo.data.success){
                      setTenantInfo(tenantInfo.data.data)
                      setEntry({type: 'self'})
                      this.$router.push({path: "/menu"});
                    }
                    this.$ws.reconnect()
                    this.buttonLoading = false;
                    this.buttonLoadText = "登录";
                  })
                }
              })
            }
          }).catch(() => {
            this.buttonLoading = false;
            this.buttonLoadText = "登录";
          });

        }
      },
      showVerifyModal(){
        let flagUser = this.handleInputBlur(this.userName, 'userName', true);
        let flagPassword = this.handleInputBlur(this.password, 'password', true);
        if (flagUser && flagPassword) {
          this.showVerify = true
        }
      }
    }
  };
</script>
<!--<style lang="less">-->
<!--  @import "./index";-->
<!--</style>-->
<style src="./index.css" />

<style>
.vue-auth-box_{
  top: 50%;
}
</style>
